import React, { useState, useEffect, useCallback } from 'react'
import $axios from '@/plugins/request'
import { withRouter } from 'react-router';
import ReactDOM from 'react-router-dom'
import PropTypes from "prop-types";
import moment from 'moment';

import {
  Form,
  Input,
  Button,
  InputNumber,
  Select,
  message,
  Space,
  DatePicker
} from 'antd';
const { Option } = Select

function AUForm(props) {
  const [form] = Form.useForm()
  const [branchList, setBranchList] = useState([])

  let isEdit = !!props?.data;

  const getBranchData = useCallback(async () => {
    const { data: res } = await $axios.get("/api/branch/findAll");
    if (res.code !== 1) return message.warning(res.msg);
    setBranchList(res.data.list)
  }, [])

  useEffect(() => {
    getBranchData()
  }, [])

  useEffect(()=>{
    if (isEdit) {
      props.data.join_time = props.data?.join_time ? moment(props.data?.join_time) : null
      props.data.zz_time = props.data?.zz_time ? moment(props.data?.zz_time) : null
      form.setFieldsValue(props.data)
    }
  })

  const onFinish = useCallback(async ({ _id, ...values }) => {
    try {
      const { data: res } = isEdit ? await $axios.put(`/api/party/${_id}`, values) : await $axios.post(`/api/party/0`, values)
      if (res.code !== 1) return message.warning(res.msg);
      message.success(res.msg);
    } catch (err) {
      message.error(err.message);
    }
  },[]) 

  return (
    <Form
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 6 }}
      layout="horizontal"
      form={form}
      onFinish={onFinish}
      autoComplete="off"
    >
      <Form.Item label="党员ID" name="_id" hidden>
        <Input autoComplete="off" />
      </Form.Item>
      <Form.Item label="党员姓名" name="fullname">
        <Input autoComplete="off" />
      </Form.Item>
      <Form.Item label="年龄" name="age" initialValue={20}>
        <InputNumber min="5" autoComplete="off" />
      </Form.Item>
      <Form.Item label="所属支部" name="branch">
        <Select style={{ width: 120 }} defaultValue="">
          <Option value="" disabled>请选择</Option>
          {
            branchList.map(item=>{
              return <Option key={item._id} value={item.branch}>{item.branch}</Option>
            })
          }
        </Select>
      </Form.Item>
      <Form.Item label="加入时间" name="join_time">
        <DatePicker
          showToday
          format="YYYY-MM-DD HH:mm:ss"
          showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
        />
      </Form.Item >
      <Form.Item label="转正时间" name="zz_time">
        <DatePicker
          showToday
          format="YYYY-MM-DD HH:mm:ss"
          showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
        />
      </Form.Item >
      <Form.Item wrapperCol={{ offset: 4 }}>
        <Space>
          <Button onClick={() => { props.history.goBack() }}>返回</Button>
          <Button type="primary" htmlType="submit">提交</Button>
        </Space>
      </Form.Item>
    </Form >
  )
}

// props数据类型校验 https://www.cnblogs.com/huangqiming/p/10238196.html
AUForm.propTypes = {
  // 指定的多个对象类型中的一个
  // data: PropTypes.oneOfType([
  //   PropTypes.object,
  //   PropTypes.string,
  // ]),
  // data: PropTypes.object,
  // // 定义data对象的属性类型
  // data: PropTypes.shape({
  //   // user_id: PropTypes.number,
  //   // user_name: PropTypes.string.isRequired
  // })
}
// props默认值
AUForm.defaultProps = {
  // data: {
  //   remark: 2
  // }
}
//用到props.goBack()返回,包装一下
export default withRouter(AUForm)